import { Layout, Button, Avatar, Dropdown, MenuProps, Typography } from 'antd'
import { SettingOutlined, UserOutlined } from '@ant-design/icons'
import { useSelector, useDispatch } from 'react-redux';
import { type RootState } from '@/store'
import { resetUserInfo, type UserInfoState } from '@/store/modules/user'
import style from './index.module.scss'
import { HTTP_URL } from '@/common/http-url'
import { useRemoveLocalStorage } from '@/hooks/useLocalStorage';
import { MENU, TOKEN } from '@/common/constant';
import { useNavigate } from 'react-router-dom';
const { Header } = Layout
const { Link } = Typography

export default function () {
  // 第一个泛型参数 RootState 是整个Redux store的状态类型。
  // 第二个泛型参数 UserInfoType 是选择器返回的特定状态片段的类型。这将使得 userInfo 变量具有正确的类型信息。
  const { userInfo } = useSelector<RootState, UserInfoState>(
    (state) => state.user
  )

  const dispatch = useDispatch()
  const navigateTo = useNavigate()

  const logout = () => {
    // 清除store
    dispatch(resetUserInfo())
    // 清除本地数据
    useRemoveLocalStorage(TOKEN)
    useRemoveLocalStorage(MENU)
    // 跳转login
    navigateTo('/login')
  }

  const items: MenuProps['items'] = [
    {
      key: '1',
      label: <Link onClick={logout}>退出登陆</Link>
    }
  ]

  return (
    <>
      <Header
        className={style.headerContent}
        style={{
          background: '#ffffff'
        }}
      >
        {/* 昵称信息 */}
        <div className={style.headerLeft}>
          <div className={style.title}>Hello, {userInfo.nick}</div>
          <span>欢迎来到歪fChat后台管理系统</span>
        </div>
        {/* 头像、设置等 */}
        <div className={style.headerRight}>
          <Dropdown
            menu={{ items }}
            placement='bottom'
          >
            <Button
              shape='circle'
              icon={<SettingOutlined />}
            />
          </Dropdown>
          <div className={style.userPic}>
            <Avatar
              src={HTTP_URL + userInfo.imgUrl}
              icon={<UserOutlined />}
            />
          </div>
        </div>
      </Header>
    </>
  )
}
